<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <script>

        // 页面的宽高
        //   页面的实际宽高   scrollHeight / scrollLeft 
        //   页面的可视宽高   clientHeight / clientWidth
        //   页面的滚动距离   scrollLeft / scrollTop


        // 盒子的宽高
        //   css内容宽高  getComputedStyle(div).height   字符串  200px
        //   盒子加内边距的宽高   clientWidth / clientHeight 
        //   盒子加内边距加边框的宽高  offsetWidth / offsetHeight

        //   盒子距离最近的具有定位的祖先元素的距离   offsetLeft / offsetTop

    </script>
    
</body>
</html>